<template>
  <div name="demo" class="demo">
      <span class="buttom" v-if="showbottom" type="button" @click="add">选择文件</span>
      <br/>
      <fileupload v-for="(item,index) in count" :index="item" :fileType="fileType" :key="index" :namelog="namelog" v-on:listenToChildEvent="showData" v-on:listenToChildEvent2="filedelete"></fileupload>
      <file v-for="(file,index) in fileList" :key="index" :index="index" :file="file" :show="show" v-on:listenToChildEvent="filedelete"></file>
      <div v-if="showadd" class="showpic0">
        <div class="showpicdiv0">
          <div class="imgbg0">
          <i class="el-icon-plus" @click="add"></i>
          </div>
        </div>
      </div>
      <br/>
      <!--<button type="button" @click="save">保存</button>-->
  </div>
</template>
<script type="text/ecmascript-6">
  import fileupload from './fileupload.vue'
  import file from './file.vue'
  export default {
    props: {
      fileType: {
        type: Array,
        default: ['.png', '.jpg']
      },
      fileName: {
        type: String
      },
      content: {
        type: String
      },
      index: {
        type: Number
      },
      show: {
        type: Boolean,
        default: false
      },
      showadd: {
        type: Boolean,
        default: false
      },
      showbottom: {
        type: Boolean,
        default: false
      },
      namelog: {
        type: String,
        default: 'log'
      }
    },
    data () {
      return {
        count: 0,
        fileList: []
      }
    },
    computed: {
      // ss () {
      //   alert(this.namelog)
      // }
      // alert(this.namelog)
    },
    methods: {
      add () {
        // this.count.push(this.count.length + 1)
        this.count++
      },
      save () {
        if (!XMLHttpRequest.prototype.sendAsBinary) {
          XMLHttpRequest.prototype.sendAsBinary = function (datastr) {
            function byteValue (x) {
              return x.charCodeAt(0) & 0xff
            }
            var ords = Array.prototype.map.call(datastr, byteValue)
            var ui8a = new Uint8Array(ords)
            this.send(ui8a.buffer)
          }
        }
        var xhr = new XMLHttpRequest()
        xhr.open(
        'POST',
        // 'http://localhost:8080/tour/upload.htm?fileName=' + file.files[0].name
        'http://localhost:8080/tour/upload.htm'
        /*, async, default to true */
        )
        xhr.overrideMimeType('application/octet-stream')
        xhr.sendAsBinary(JSON.stringify(this.fileList))
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              console.log('upload complete')
              console.log('response: ' + xhr.responseText)
            }
          }
        }
      },
      showData (data) {
        // console.log(data.content)
        this.fileList.push(data)
        for (var i = 0; i < this.fileList.length; i++) {
          // alert(this.fileList[i].fileName)
        }
      },
      filedelete (index) {
        // alert(index)
        this.count--
        this.fileList.splice(index, 1)
        // for (var i = 0; i < this.count.length; i++) {
        //   if (this.count[i] === index) {
        //     this.count.splice(i, 1)
        //   }
        // }
        // for (var j = 0; j < this.fileList.length; j++) {
        //   if (this.fileList[j].index === index) {
        //     this.fileList.splice(j, 1)
        //   }
        // }
        // for (var k = 0; k < this.fileList.length; k++) {
        //   alert(this.fileList[k].fileName)
        // }
      }
    },
    components: {
      fileupload,
      file
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
.demo
  margin:10px;
  .buttom
    display:block;
    width:66px;
    height:30px;
    line-height:30px;
    text-align:center;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
    background-color: #20a0ff;
    border-color: #20a0ff;
  .buttom:hover
    background-color:#55aaff;
    cursor:pointer; 
  .showpic0
    width:180px;
    height:180px;
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    .showpicdiv0
      position:relative
      .imgbg0
        position:absolute;
        top:0px;
        left:0px;
        width:180px;
        height:180px;
        color:#c0c0c0;
        line-height:180px;
        text-align:center;  
        border-radius: 8px;
        border:1px dotted #c0c0c0;
        display:block;
        font-size:25px;
      .imgbg0:hover
        color:#969696;
        border:1px dotted #0080ff;
        cursor:pointer; 
        i
          cursor:pointer; 
</style>
